<template>
  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
      <transition mode="out-in">
        <el-menu
          :default-active="activeMenu as string"
          :collapse="isCollapse"
          :background-color="bgColor"
          :text-color="textColor"
          :unique-opened="true"
          :active-text-color="theme"
          :collapse-transition="false"
          mode="vertical"
        >
          <side-bar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
        </el-menu>
      </transition>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SideBar'
}
</script>

<script setup lang="ts">
  import variables from '@/assets/styles/variables.module.scss'
  import useAppStore from '@/store/modules/app'
  import useSettingsStore from '@/store/modules/settings'
  import usePermissionStore from '@/store/modules/permission'
  import SideBarItem from "@/components/SideBar/SideBarItem.vue";
  import Logo from "@/components/SideBar/Logo.vue";
  // import { ComponentInternalInstance } from "vue";
  // const { proxy } = getCurrentInstance() as ComponentInternalInstance;

  const route = useRoute();
  const appStore = useAppStore()
  const settingsStore = useSettingsStore()
  const permissionStore = usePermissionStore()

  const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
  const showLogo = computed(() => settingsStore.sidebarLogo);
  const sideTheme = computed(() => settingsStore.sideTheme);
  const theme = computed(() => settingsStore.theme);
  const isCollapse = computed(() => !appStore.sidebar.opened);

  const activeMenu = computed(() => {
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
          return meta.activeMenu;
      }
      return path;
  })

  const bgColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground);
  const textColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor);
</script>
